<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图标</title>
<link rel="stylesheet" type="text/css" href="../../Css/reset.css">
<link rel="stylesheet" type="text/css" href="CSS/etNodeIcon.css">
<script src="../../Js/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('.etNodeIcon>.etNodeIcon_header>li').on('click',function(){
			var index = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			var content = $('.etNodeIcon>.etNodeIcon_content>li:eq('+index+')');
			
			if($(this).attr('load')=='no'){				
				content.html('');
				
				$.get('PHP/list.php',{path:$(this).attr('path')},function(data){
					if(data.status==0){
						content.html('没有找到任何文件');
					}else{
						var html = '';
						$.each(data,function(i,n){
							html += '<span><img src="'+n+'"/></span>';
						});
						content.html(html);
						$(this).attr('load','ok')
					}
				},'json');
			}
			
			$('.etNodeIcon>.etNodeIcon_content>li').hide();
			content.show();
		});
		
		$('.etNodeIconSelect').on('click',function(){
			$('.etNodeIcon').toggle();
		});
		
		$('.etNodeIcon>.etNodeIcon_content>li>span').live('click',function(){	
			var src = $(this).children('img').attr('src');		
			$('#result').html('<input type="hidden" name="icon" value="'+src+'"/><img src="'+src+'"/>');
			$('.etNodeIcon').hide();
		});
		
		$('.etNodeIcon>.etNodeIcon_header>li:eq(0)').click();
	});
</script>
</head>
<body>
	<div id="result">
	</div>
	<div class="etNodeIconSelect">
		选择图标
	</div>
	<div class="etNodeIcon">
		<ul class="etNodeIcon_header clearfix">
			<li class="active" path='01' load="no">第一组</li>
			<li  path='02' load="no">第二组</li>
			<li  path='03' load="no">第三组</li>
			<li  path='04' load="no">第四组</li>
			<li  path='05' load="no">第五组</li>
			<li  path='06' load="no">第六组</li>
			<li  path='07' load="no">第七组</li>
		</ul>
		<ul class="etNodeIcon_content clearfix">
			<li>
			</li>
			<li style="display:none;">
			</li>
			<li style="display:none;">
			</li>
			<li style="display:none;">
			</li>
			<li style="display:none;">
			</li>
			<li style="display:none;">
			</li>
			<li style="display:none;">
			</li>
		</ul>
	</div>
</body>
</html>
